<script setup>
import { ref, computed } from 'vue';
import { showToast } from 'vant';
import { useRouter } from 'vue-router'

// 使用 useRouter 创建一个 router 实例
const router = useRouter()
// 返回
const onClickLeft = () => history.back();
// 侧边导航
const active = ref(0);
const onChange = (e) => {
    // active.value = e
    console.log(e);
    // showToast(`标签名 ${index + 1}`);
};
const text = [
    { id: 1, title: '推荐' },
    { id: 2, title: '玫瑰' },
    { id: 3, title: '康乃馨' },
    { id: 4, title: '百合' },
    { id: 5, title: '菊花' },
    { id: 6, title: '绣球花' },
    { id: 7, title: '洋桔梗' },
    { id: 8, title: '草花' },
    { id: 9, title: '配花' },
    { id: 10, title: '配叶' },
    { id: 11, title: '包装' },
]
// 搜索框
const value = ref('');
const onSearch = (val) => {
    showToast(val)
};
const onClickButton = () => {
    console.log(123);

};
// 步进器
const addvalue1 = (item,index) => {
    items.value[index].value1++
    console.log(items.value[index])
}
// 加
const addplus = (item, index) => {
    items.value[index].value1++
    // console.log('加', items.value[index]);
}
//减
const redminus = (item, index) => {
    items.value[index].value1--
    // console.log('减', index);
    console.log(items.value[index])
}
// 总价
const totalprice = (item,index) => {
    return (items.value[item.id - 1].value1 * items.value[item.id - 1].price).toFixed(2)
}
// 合计
const total = computed(() => {
    let sum = 0
    items.value.forEach(item => {
        sum += items.value[item.id - 1].value1 * items.value[item.id - 1].price
    })
    return sum.toFixed(2)
})
// 排序,列表
const items = ref([
    { id:1, img: "/public/free01.png", name: '玫瑰', length: '55CM', price: '18.7', path: '/productdetails', value1: 0},
    { id:2,img: "/public/free02.png", name: '玫瑰', length: '55CM', price: '19', path: '/productdetails', value1: 0 },
    { id:3,img: "/public/free03.png", name: '玫瑰', length: '55CM', price: '55', path: '/productdetails', value1: 0},
    { id:4,img: "/public/free04.png", name: '玫瑰', length: '55CM', price: '21', path: '/productdetails',value1: 0 },
    { id:5,img: "/public/free05.png", name: '玫瑰', length: '55CM', price: '60', path: '/productdetails', value1: 0},
])
// 去商品详情
const goDetails = (e) => {
    router.push(e)
}
const sortedItems = ref([...items.value]);
const sortByPriceAscending = () => {
    console.log('升序', sortedItems.value);
    sortedItems.value = [...items.value].sort((a, b) => a.price - b.price);
};
const sortByPriceDescending = () => {
    console.log('降序', sortedItems.value);
    sortedItems.value = [...items.value].sort((a, b) => b.price - a.price);
};
// 滑动盒子
const boxes = [
    { id: 1, img: "/public/langer1.png" },
    { id: 2, img: "/public/langer2.png" },
    { id: 3, img: "/public/langer3.png" },
    { id: 4, img: "/public/langer4.png" },
    { id: 5, img: "/public/langer1.png" },
]
// 结算
const onSubmit = () => {
    router.push('/orderdetails')
}

</script>
<template>
    <div class="classification">
        <!-- 导航 -->
        <van-nav-bar background="#fff" title="自选大厅" left-arrow @click-left="onClickLeft" />
        <!-- 搜索框 -->
        <van-search background="#fff" v-model="value" shape="round" show-action placeholder="搜索花材/供应商"
            @search="onSearch">
            <template #action>
                <div @click="onClickButton">搜索</div>
            </template>
        </van-search>
        <!-- 侧边导航 -->
        <div class="all">
            <!-- 侧边 -->
            <div class="sidenavigation">
                <van-sidebar v-model="active" @change="onChange">
                    <van-sidebar-item v-for="item in text" :key="item.id" :title="item.title" />
                </van-sidebar>
            </div>
            <!-- 内容 -->
            <div class="content">
                <div class="one" v-show="active == 0">
                    <!-- 排序 -->
                    <div class="sort">
                        <div class="all">
                            <div class="left">
                                价格
                            </div>
                            <div class="right">
                                <div class="photo" @click="sortByPriceAscending"> <img src="/public/上箭头.png" alt="">
                                </div>
                                <div class="photo" @click="sortByPriceDescending"> <img src="/public/下箭头.png" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="all">
                            <div class="left">
                                等级
                            </div>
                            <div class="right">
                                <div class="photo"> <img src="/public/上箭头.png" alt="">
                                </div>
                                <div class="photo"> <img src="/public/下箭头.png" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="all">
                            <div class="left">
                                销量
                            </div>
                            <div class="right">
                                <div class="photo"> <img src="/public/下箭头.png" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="all">
                            <div class="left">
                                选颜色
                            </div>
                        </div>
                    </div>
                    <div class="text-all" v-for="(item, index) in sortedItems " :key="item.name">
                        <div class="left">
                            <img :src="item.img" alt="" @click="goDetails(item.path)">
                        </div>
                        <div class="center">
                            <div class="center-one">{{ item.name }} <div>{{ item.length }}</div>
                            </div>
                            <div class="center-two">
                                <div>品牌玫瑰</div> 供应充足
                            </div>
                            <div class="center-three">￥{{ totalprice(item)}}</div>
                        </div>
                        <div class="right">
                            <van-stepper v-show="item.value1 >= 1" v-model="item.value1" min="0" item.value1
                                input-width="25px" button-size="25px" @plus="addplus(item, index)"
                                @minus="redminus(item, index)" />
                            <van-button @click="addvalue1(item,index)" v-show="item.value1 < 1" icon="plus" size="mini"
                                type="primary" />
                        </div>
                    </div>
                </div>
                <div class="one" v-show="active == 1">536</div>
                <div class="one" v-show="active == 2">45645</div>
                <div class="one" v-show="active == 3">3</div>
                <div class="one" v-show="active == 4">4</div>
                <div class="one" v-show="active == 5">5</div>
                <div class="one" v-show="active == 6">6</div>
                <div class="one" v-show="active == 7">7</div>
                <div class="one" v-show="active == 8">8</div>
                <div class="one" v-show="active == 9">9</div>
                <div class="one" v-show="active == 10">10</div>
            </div>
        </div>
        <div style="height: 100px;"></div>
        <!-- 滑动盒子 -->
        <div class="container">
            <div class="container-left">
                <div class="scroll-container">
                    <div class="one" v-for="item in boxes" :key="item.id">
                        <img :src="item.img" alt="">
                    </div>

                </div>
            </div>
            <div class="container-right">推荐方案 {{ total }}
            </div>
        </div>
        <!-- 结算 -->

        <van-submit-bar :price="1870" button-text="结算" @submit="onSubmit" />
    </div>
</template>

<style lang="scss">
.classification {

    /*导航 */
    .van-nav-bar__content {
        position: relative;
        height: 100px;
        background-color: #f84c55;

        /* 透明度为50% */
        .van-badge__wrapper {
            font-size: 18px;
            top: 20px;
            position: absolute;
            color: #fff;
        }

        .van-nav-bar__title {
            font-size: 18px;
            left: 41%;
            top: 20px;
            position: absolute;
            color: #fff;
        }
    }

    /*搜索框 */
    .van-search {
        --van-search-input-height: 40px;
        --van-search-content-background: #fff;

        .van-search__action {
            right: 0;
            position: absolute;
            text-align: center;
            width: 15%;
            color: #fff;
            background-color: #f96e75;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
        }
    }

    /*侧边导航 */
    .all {
        display: flex;
        justify-content: space-between;
        padding-top: 10px;
        border-top: 1px solid #f6f6f6;

        .sidenavigation {
            width: 20%;

            .van-sidebar {
                .van-sidebar-item--select {
                    color: #ff5050;
                }

                .van-sidebar-item--select:before {
                    background-color: #ff5050;
                }

                .van-sidebar-item {
                    text-align: center;
                    border-bottom: 1px solid #000;

                }

            }
        }

        .content {
            width: 78%;

            // 推荐
            .one {
                box-sizing: border-box;
                padding: 3px;

                /*排序 */
                .sort {
                    width: 100%;
                    display: flex;
                    box-sizing: border-box;
                    justify-content: space-evenly;

                    .all {

                        width: 22%;
                        border-radius: 10px;
                        background-color: #f0f0f0;
                        display: flex;
                        justify-content: space-around;
                        align-items: center;

                        .left {
                            margin-top: -10px;
                            width: 68%;
                            text-align: center;
                            color: #999999;
                            font-size: 12px;
                            line-height: 20px;
                        }

                        .right {
                            margin-top: -10px;
                            width: 30%;
                            margin-right: 10px;

                            .photo {
                                display: flex;
                                flex-wrap: wrap;

                                img {
                                    width: 80%;
                                    height: 10px;
                                }
                            }
                        }
                    }
                }

                // 内容
                .text-all {
                    margin-top: 15px;
                    display: flex;
                    justify-content: space-between;

                    .left {
                        width: 25%;
                        text-align: center;
                        height: 80px;

                        img {
                            border-radius: 5px;
                            width: 100%;
                            height: 80px;
                        }

                    }

                    .center {
                        width: 55%;

                        .center-one {
                            display: flex;
                            align-items: center;

                            div {
                                width: 30%;
                                box-sizing: border-box;
                                text-align: center;
                                font-size: 14px;
                                margin-left: 5px;
                                background-color: #fda461;
                                color: #fff;
                            }
                        }

                        .center-two {
                            margin-top: 10px;
                            display: flex;
                            align-items: center;
                            color: #b9b9b9;

                            div {
                                width: 40%;
                                box-sizing: border-box;
                                text-align: center;
                                font-size: 12px;
                                margin-right: 5px;
                                color: #fd9091;
                                background-color: #fbe6eb;
                            }
                        }

                        .center-three {
                            margin-top: 10px;
                            font-weight: bold;
                            color: #f84d56;
                        }
                    }

                    .right {
                        text-align: center;
                        width: 15%;
                        height: 80px;

                        .van-stepper {
                            width: 100%;

                            .van-stepper__minus {
                                border: 1px solid #000;
                                background-color: #fff;
                            }

                            .van-stepper__input {
                                border: 1px solid #000;
                                background-color: #fff;
                            }

                            .van-stepper__plus {
                                border: 1px solid #000;
                                background-color: #fff;
                            }
                        }

                        .van-button {
                            margin-top: 50px;
                            color: #000;
                            background-color: #fff;
                            border: 1px solid #000;
                        }
                    }
                }
            }
        }
    }

    /*滑动盒子 */
    .container {
        width: 100%;
        background-color: #fff;
        position: fixed;
        bottom: 50px;
        padding: 5px;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        align-items: center;

        .container-left {
            width: 78%;
            overflow-x: auto;

            .scroll-container {
                display: flex;
                width: max-content;

                .one {
                    width: 60px;
                    height: 50px;
                    margin-left: 5px;
                    text-align: center;

                    img {
                        margin-top: 5px;
                        width: 80%;
                        height: 80%;
                    }



                }
            }
        }

        .container-right {
            width: 20%;
        }
    }

    /*结算 */
    .van-submit-bar__bar {
        display: flex;
        justify-content: space-between;

        .van-submit-bar__text {
            width: 30%;
            align-items: center;
            display: flex;
        }
    }
}
</style>
